<!--
 * @Author: xiawei 1243162387@qq.com
 * @Date: 2024-04-25 10:38:29
 * @LastEditors: xiawei 1243162387@qq.com
 * @LastEditTime: 2024-05-10 14:52:55
-->
<template>
    <VcForm ref="CustomeFormRef" :loading="loading" :fields="formConfig.fields" :label-width="formConfig.labelWidth" @submit="submit">
    </VcForm>
</template>

<script lang="ts" setup>
import { ElMessageBox } from 'element-plus'
import { getFields } from './fields'
import useForm from '@/hooks/useForm'
const formConfig = {
    fields: getFields(),
    labelWidth: 100
}
// 表单提交callback
const submitCallback = (data: unknown) => {
    loading.value = true;
    ElMessageBox.alert(`提交数据：${JSON.stringify(data)}`, {
    confirmButtonText: 'OK'}).finally(()=>{
        loading.value = false
    })
}
const {
    // 表单实例
    CustomeFormRef,
    // 表单提交回调
    submit,
    // 控制多次点击
    loading
} = useForm(submitCallback)
</script>